
<template>
  <div class="ListReal">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <!------------------------------------------------------评价------------------------------------------------------------------>
      <div class="listBox">
        <div class="list">
          <div class="container">
            <p class="textTitle">
              <van-icon name="manager" />实名认证
            </p>
            <p class="textDesc">可发布作品，放心交易</p>
            <van-button round type="info" @click="$router.push('/real?type=')">申请</van-button>
          </div>
        </div>
        <div class="list">
          <div class="container">
            <p class="textTitle">
              <van-icon name="shop" />认证艺术家
            </p>
            <p class="textDesc">可自行促销，可开专场，并且开通店铺，让卖家更权威，更值得信赖</p>
            <van-button round type="info" @click="$router.push('/real?type=experts')">申请</van-button>
          </div>
        </div>
        <div class="list">
          <div class="container">
            <p class="textTitle">
              <van-icon name="award" />认证审评人
            </p>
            <p class="textDesc">认证实名评审人，公正专业评价作品。</p>
            <van-button round type="info">申请</van-button>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
export default {
  name: 'real',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '开通身份',
      MianLoading: false,
      count: 0
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {},

  destroyed () {},

  methods: {
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MianLoading = false
        this.count++
      }, 500)
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.ListReal {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .listBox {
      margin-top: 10px;
      .list {
        background-color: #ffffff;
        padding: 15px 0;
        position: relative;
        margin-bottom: 10px;
        p {
          font-size: 14px;
          margin: 0;
        }
        .textTitle {
          color: #333333;
          margin-bottom: 10px;
          .van-icon {
            margin-right: 10px;
          }
          .van-icon-manager {
            color: #ffa300;
          }
          .van-icon-shop {
            color: #00B0CF;
          }
          .van-icon-award {
            color: #FFD34E;
          }
        }
        .textDesc {
          font-size: 12px;
          color: #666666;
        }
        .van-button {
          // position: absolute;
          // right: 15px;
          // top: 25px;
          width: 100%;
          height: 35px;
          line-height: 35px;
          font-size: 14px;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
